<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ include file="/page/common/common.jsp"%>
<c:set var="groupId" value="<%=request.getParameter(\"groupId\") %>"></c:set>
<html>
	<head>
		<script type="text/javascript">
		jQuery(function($){
			$('#gridTable1').datagrid({
				title:'旅客列表', //标题
				method:'post',
				singleSelect:false, //多选
				height:300, //高度
				fitColumns: true, //自动调整各列，用了这个属性，下面各列的宽度值就只是一个比例。
				striped: true, //奇偶行颜色不同
				collapsible:true,//可折叠
				url:"${ctx}/sys/passenger/query.sys", //数据来源
				sortName: 'personName', //排序的列
				sortOrder: 'desc', //倒序
				remoteSort: true, //服务器端排序
				idField:'personId', //主键字段
				queryParams:{}, //查询条件
				pagination:true, //显示分页
				rownumbers:true, //显示行号
				columns:[[
					{field:'ck',checkbox:true,width:2}, //显示复选框
					{field:'personName',title:'旅客姓名',width:15},
					{field:'personNi',title:'身份证号码',width:30},
					{field:'personType',title:'身份',width:20,
						formatter:function(value,row){
							switch(row.personType){
								case ${constant.PASSENGER}:
									return '旅客';
									break;
								case ${constant.WORKMAN}:
									return '工作人员';
									break;
							}
						}
					}
				]],
				onLoadSuccess:function(){
					$('#gridTable1').datagrid('clearSelections'); //一定要加上这一句，要不然datagrid会记住之前的选择状态，删除时会出问题
				}
			});
			$('#gridTable2').datagrid({
			title:'公司列表', //标题
			method:'post',
			singleSelect:false, //多选
			height:300, //高度
			fitColumns: true, //自动调整各列，用了这个属性，下面各列的宽度值就只是一个比例。
			striped: true, //奇偶行颜色不同
			collapsible:true,//可折叠
			url:"${ctx}/sys/company/query.sys", //数据来源
			sortName: 'companyName', //排序的列
			sortOrder: 'desc', //倒序
			remoteSort: true, //服务器端排序
			idField:'companyId', //主键字段
			queryParams:{}, //查询条件
			pagination:true, //显示分页
			rownumbers:true, //显示行号
			columns:[[
				{field:'ck',checkbox:true,width:2}, //显示复选框
				{field:'companyName',title:'公司名称',width:25},
				{field:'companyType',title:'类型',width:20,
					formatter:function(value,row){
						switch(row.companyType){
							case ${constant.AGENT}:
								return '代理人';
								break;
							case ${constant.AIRPORT}:
								return '航空公司';
								break;
						}
					}	
				},
				{field:'personPhone',title:'手机号码',width:25}
			]],
			toolbar:[],
			onLoadSuccess:function(){
				$('#gridTable2').datagrid('clearSelections'); //一定要加上这一句，要不然datagrid会记住之前的选择状态，删除时会出问题
			}
		});
		});
		/** 表格查询 */
		function searchPassengerInfo(){
			var fields =$('#queryPassengerForm').serializeArray(); //自动序列化表单元素为JSON对象数据格式如下
			// [ 
			//     {name: 'firstname', value: 'Hello'}, 
			//     {name: 'lastname', value: 'World'},
			//     {name: 'alias'}, // this one was empty
	  		// ]
			var params={};
			$.each( fields, function(i, field){//设置查询参数
				params[field.name] = field.value; 
			});
			$('#gridTable1').datagrid('reload',params); //设置好查询参数 reload 一下就可以了
		}
		
		/** 表格查询 */
		function searchCompanyInfo(){
			var fields =$('#queryCompanyForm').serializeArray(); //自动序列化表单元素为JSON对象数据格式如下
			// [ 
			//     {name: 'firstname', value: 'Hello'}, 
			//     {name: 'lastname', value: 'World'},
			//     {name: 'alias'}, // this one was empty
	  		// ]
			var params={};
			$.each( fields, function(i, field){//设置查询参数
				params[field.name] = field.value; 
			});
			$('#gridTable2').datagrid('reload',params); //设置好查询参数 reload 一下就可以了
		}
		
		/** 增加或更新 */
		function updateOrAdd(flag){
			var r = $('#groupForm').form('validate');
			if(!r) {
				return false;
			}
			var rows1 = $('#gridTable1').datagrid('getSelections');
	       	var rows2 = $('#gridTable2').datagrid('getSelections');
	       	var ps1 = "";
	       	var ps2 = "";
	       	$.each(rows1,function(i,n){
	       		if(i==0) 
	       			ps1 += "personIds="+n.personId
	       		else
	       			ps1 += "&personIds="+n.personId;
	       	});
	       	$.each(rows2,function(i,n){
	       		if(i==0) 
	       			ps2 += "companyIds="+n.companyId
	       		else
	       			ps2 += "&companyIds="+n.companyId;
	       	});
			var url="${ctx}/sys/group/addMember.sys";
			if(flag){
				url="${ctx}/sys/group/update.sys";
			}
			if(ps1.length>1){
				url = url+'?'+ps1;
				if(ps2.length>1){
					url = url +'&'+ps2;
				}
			}else{
				if(ps2.length>1){
					url = url +'?'+ps2;
				}
			}
			$.post(url,$("#groupForm").serializeArray(),function(data){
	       		if(data.success){//操作成功
	       			$.messager.confirm("操作成功", "确定返回组列表?", function (data) {
			            if (data) {
			                window.location.href = "${ctx}/page/sys/group/group/group_list.jsp";
			            }
			        });
				}else{
					$.messager.alert('提示',data.msg,'warning');	
				}
	       	});
			
		}
	</script>
	</head>
	<body>
		<!-- 验证还是jquery-validation好用，这里省事没用 -->
		<form class="auform" id="groupForm" method="post">
			<input type="hidden" name="groupId" id="groupId" value="${groupId}"/>
			<table>
				<tr>
					<td class="autd3">
						<a href="#" id="btn-add" onclick="updateOrAdd('${param.update}');" class="easyui-linkbutton">添加成员</a>
					</td>
				</tr>
			</table>
		</form>
		<div style="float: left;width: 850px;height: 400px;">
			<div style="float: left;width: 400px;height: 400px;">
				<form id="queryPassengerForm" class="qform">
					<table class="qtable" style="width: 400px">
						<tr>
							<td class="qtd">旅客姓名：<input class="txt" name="personName" style="width: 50px;" /></td>
							<td class="qtd">身份证号：<input class="txt" name="personNi" style="width: 100px;"/></td>
							<td class="qtd" align="center">
								<a href="#" onclick="searchPassengerInfo();" class="easyui-linkbutton">查询</a>
							</td>
						</tr>
					</table>
				</form>
				<div class="griddiv1">
					<table>
						<tr>
							<td>
								<table id="gridTable1" style="width: 400px; height: 400px;"></table>
							</td>
						</tr>
					</table>
				</div>
			</div>
			<div style="float: right;width: 400px;height: 400px;">
				<form id="queryCompanyForm" class="qform">
					<table class="qtable" style="width: 400px">
						<tr>
							<td class="qtd">公司名称：<input class="txt" name="companyName" style="width: 50px;" /></td>
							<td class="qtd" align="center">
								<a href="#" onclick="searchCompanyInfo();" class="easyui-linkbutton">查询</a>
							</td>
						</tr>
					</table>
				</form>
				<div class="griddiv2">
					<table id="gridTable2" style="width: 400px; height: 400px;"></table>
				</div>
			</div>
		</div>
	</body>
</html>
